<template>
	<view class="content">
		<u-navbar :is-back="false" :title-bold="true" :border-bottom="false" :background="background" title="知晓天下事"></u-navbar>
		<view>
			<!-- 每日早报 -->
			<view>
				<text class="textcla" style="color: #f46b35;">每日早报</text>
				<view class="oneday" @click="gozaonews">
					<u-image width="100%" height="280rpx" :src="dataobj.head_image"></u-image>
				</view>
			</view>
			<!-- 今日热榜 -->
			<view>
				<text class="textcla" style="color: #f25b8d;">今日热榜</text>
				<view class="oneday">
					<u-image width="100%" height="280rpx" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-1c8d9cf3-f03e-430f-963d-3d8e19d65dbe/5684fc75-d4f7-472a-9e18-12b3b2611937.jpg"></u-image>
				</view>
			</view>
			<!-- 历史上的今天 -->
			<view>
				<text class="textcla" style="color: #4cb050;">历史上的今天</text>
				<view class="oneday" @click="golishiday">
					<u-image width="100%" height="280rpx" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-1c8d9cf3-f03e-430f-963d-3d8e19d65dbe/f0222f78-6e01-4945-a830-acb95255afab.jpg"></u-image>
				</view>
			</view>
			<!-- 二十四节气 -->
			<view>
				<text class="textcla" style="color: #fec104;">二十四节气</text>
				<view class="oneday" @click="gojieqi">
					<u-image width="100%" height="280rpx" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-1c8d9cf3-f03e-430f-963d-3d8e19d65dbe/fbbdd6a8-f5a4-4e1d-a8d1-40de2fda3f7c.jpg"></u-image>
				</view>
			</view>
		</view>
		<!-- 占位 -->
		<view style="width: 100%;height: 100rpx;background-color: #fef4d6;">
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataobj: {},
				background: {
					backgroundColor: '#fef4d6',
				},
			}
		},
		onLoad() {
			this.getdata()
		},
		methods: {
			async getdata() {
				let timestamp = +new Date()
				const db = uniCloud.database()
				let res = await db.collection('mor_news').where({
					date: this.$u.timeFormat(timestamp, 'yyyy-mm-dd')
				}).get({
					getOne: true
				})
				if (res.result.code === 0) {
					console.log(res.result.data);
					this.dataobj = res.result.data
				} else {

				}
			},
			gozaonews(){
				uni.navigateTo({
					url:'./zao_news/zao_news'
				})
			},
			golishiday(){
				uni.navigateTo({
					url:'./lishi_day/lishi_day'
				})
			},
			gojieqi(){
				uni.navigateTo({
					url:'./jieqi/jieqi'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #fef4d6;
		// background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
	}

	.oneday {
		width: 95%;
		margin: auto;
		border-radius: 41rpx;
		border: 6rpx solid #fff;
		font-weight: bold;
		margin-bottom: 40rpx;
		overflow: hidden;
		box-shadow: -3px 3px 6px #d2d2d2;
	}

	.textcla {
		position: relative;
		font-size: 36rpx;
		padding: 20rpx 0px;
		margin: 20rpx 0px;
		display: block;
		text-align: center;
		font-weight: bold;
		&::after {
			content: '';
			position: absolute;
			bottom: 6rpx;
			left: 44%;
			width: 84rpx;
			height: 10rpx;
			background-color: #fff;
			border-radius: 20rpx;
		}
	}
</style>
